//后续添加的功能，撤销删除，待办数量，设置提醒，键盘Enter添加待办，localStorage持久化存储
//整体改架构，像手机上那样：可以设置大标题+副待办的形式
//读取本地存储的数据，有的话就返回转换字符串后的对象，没有就返回空数组

//敲定的解决方案：在

function getData() {
    var data = localStorage.getItem("todolist");
    if (data !== null) {
        return JSON.parse(data);
    } else {
        return [];
    }
}

function setData(data) {
    localStorage.setItem("todolist", JSON.stringify(data));
}

function load() {
    var data_List = getData();
    $.each(data_List, function(i, ele) {
        newList(ele.title, ele.done);
    });
}

function newList(title, isDone) {
    //目前用作网页打开时load遍历显示、单个添加待办时使用
    //1、添加的li元素 2、未完成（多选框）3、已完成 4、删除待办按钮 5、待办内容
    var new_todo = $("<li></li>");
    var new_checkbox = "<input type='checkbox' name='' id='' class='complete_box'>";
    var new_checkbox_checked = "<input type='checkbox' name='' id='' class='complete_box' checked>";
    var new_delBtn = "<a href='javascript: ;' class='deleteBtn'>删除</a>";
    var new_content = "<p>" + title + "</p>";
    if (isDone === false) { //false表示待办
        new_todo.html(new_checkbox + new_content + new_delBtn);
        $(".list_tobeProcessed").prepend(new_todo);
    } else {
        new_todo.html(new_checkbox_checked + new_content + new_delBtn);
        $(".list_processed").prepend(new_todo);
    }
    //下滑动画
    new_todo.stop().slideDown("fast");
    //发布以后清空输入框
    $("#new-input").val("");
    //展示待办事项
    $(".list_tobeProcessed").stop().show("fast");
}

//添加到列表中
function addList() {
    // alert(1);
    var new_todo_content = $("#new-input").val();
    //判断内容是否为空
    if (new_todo_content === "") {
        alert("请输入内容");
        return;
    }
    console.log("新增待办：" + new_todo_content); //问题：input内容用val获取

    //本地化存储
    var local = getData();
    local.push({ title: new_todo_content, done: false });
    setData(local);

    //单独添加
    newList(new_todo_content, false);
}
$(function() {
    //一、最基本的功能：新增待办事项
    //点击按钮 新增待办事项
    $(".newItem_btn").on("click", addList);
    //按下回车键 新增待办事项
    $("#new-input").on("keydown", function(event) {
        if (event.key === "Enter") {
            addList();
        }
    });

    //二、删除：待办、已完成事项
    $(".list_tobeProcessed,.list_processed").on("click", ".deleteBtn", function() { //问题：动态按钮添加后添加监听需要用on父元素然后第二个参数加在子元素上
        var index_list = $(this).parents("li").index();
        console.log($(this).parents("li").index());
        var data_list = getData();
        console.log(data_list);
        //1、删除本地存储对应的元素splice 
        //移除的数组元素的方法(移除位置,1)，移除数组[移除位置]的这个元素
        //移除的位置：
        //本地化数组：length - index - 1 （数组长度=getData().length，索引号=$(this).parent("li").index()）

        // setData(data_list.splice(data_list.length - index_list - 1, 1));
        data_list.splice(data_list.length - index_list - 1, 1); //问题：需要先对数组操作后再去键入本地
        // console.log(data_list);
        setData(data_list);


        //2、在页面上移除这个元素
        $(this).parents("li").stop().slideUp("slow", function() {
            //回调函数在上拉隐藏结束后直接删除此事件
            $(this).remove(); //问题：这时的this已经变成了执行slideup的li
        });
        // $(this).parent().remove();移入回调函数
    });

    //三、待办完成点击按钮，移入已完成
    $(".list_tobeProcessed,.list_processed").on("change", ".complete_box", function() {
        // console.log($(this).prop("checked"));
        var changed_todo = $(this).parent();
        //1、本地存储数据修改
        //思路：获取索引号，数组长度，用索引号
        console.log($(this).parents("li").index());

        //2、页面变化
        //思考：这里的下拉动画怎么添加，解决，先上拉再回调函数添加到另一个里面再下拉
        if ($(this).prop("checked")) {
            changed_todo.stop().slideUp("fast", function() {
                $(".list_processed").prepend(changed_todo);
            });
            changed_todo.slideDown("fast");
        } else {
            changed_todo.stop().slideUp("slow", function() {
                $(".list_tobeProcessed").prepend(changed_todo);
            });
            changed_todo.slideDown("slow");
        }
    });

    //四、折叠/展开功能
    $(".title_tbp a,.title_processed a").on("click", function() {
        var p_ul = $(this).parent().siblings("ul");
        if ($(p_ul).css("display") === "block") {
            p_ul.hide("fast");
        } else {
            p_ul.stop().show("slow");
        }
    });
    load();
});
/*wsl
var allList = [{ title: "wsl czz" }]

targetContent = "wsl czz"

var tarIndex = allList.findIndex(function(item, index) {
    item.title === targetContent
    return true
})

allList.splice(tarIndex, 1)*/